<template>
  <div class="zpageWrap">
    <div class="Calendarselect">
      <el-date-picker v-model="monthValue" type="month" size="mini" @change="changeMonth" :clearable="false"></el-date-picker>
    </div>
    <el-calendar v-model="value">
      <template slot="dateCell" slot-scope="{date, data}">
        <div v-html="solar2lunar(data.day)" class="dateWrap"></div>
      </template>
    </el-calendar>
    <div class="tips">
      <p>{{zda.join("，")}}</p>
      <p>{{zxiao.join("，")}}</p>
      <p>{{zlun.join("，")}}</p>
    </div>
  </div>
</template>
<script>
import calendar from 'js-calendar-converter'

import {
  mapState,
  mapMutations
} from 'vuex'

const da2 = ['道', '远', '几', '时', '通', '达', '路', '遥', '何', '日', '还', '乡', ];
const daArr2 = [0, 1, 4, 5, 7, 10];
const da = ['道', '远', '几', '时', '路', '遥', '通', '达', '何', '日', '还', '乡', ];
const daArr = [0, 1, 5, 6, 7, 10];

const xiao = ['生', '老', '病', '死', '苦', ];
const xiaoArr = [0, 1];

const lun2 = ['大安', '留连', '速喜', '赤口', '小吉', '空亡', ];
const lunArr2 = [0, 2];
const lun = ['留连', '速喜', '赤口', '小吉', '空亡', '大安', ];
const lunArr = [1, 5];

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      calendar: calendar,
      value: '',
      zda: da,
      zdaArr: daArr,
      zxiao: xiao,
      zlun: lun,
      zlunArr: lunArr,
    }
  },
  computed: {
    monthValue: {
      get: function() {
        return this.value
      },
      set: function(newValue) {
        this.value = newValue
      }
    }
  },
  watch: {
    '$route': {
      handler(to, from) {
        console.log(to)
        let type = to.query.type;
        if(type == 1) {
          this.zda = da2;
          this.zlun = lun2;
          this.zlunArr = lunArr2;
        }
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    this.value = new Date();
    this.$nextTick(() => {
      this.removeBtn();
    })
  },
  methods: {
    solar2lunar(val) {
      let solarDayArr = val.split('-');
      let dateS = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]);
      let { lMonth, lDay, IMonthCn, IDayCn, date, lunarDate, lunarFestival, Term } = dateS;

      let daIndex = 0;
      let xiaoIndex = 0;
      let lunIndexM = 0;
      let lunIndex = 0;
      let goodDayCls = '';

      daIndex = (lDay - 1) % 12;
      xiaoIndex = (lDay - 1) % 5;
      // 本月初一第一天lun：lun[lunIndexM]
      lunIndexM = (lMonth - 1) % 6;
      lunIndex = (lDay - 1) % 6 + lunIndexM;
      if (date == '2023-8-5') {
        console.log(lDay)
        console.log(lMonth)
        console.log(lunIndexM)
        console.log(dateS)
      }


      lunIndex = lunIndex > 5 ? (lunIndex - 6) : lunIndex;

      if (~this.zdaArr.indexOf(daIndex)) {
        // 大黄道
        if (~xiaoArr.indexOf(xiaoIndex)) {
          goodDayCls = 'huangdao xiao';
          if (~this.zlunArr.indexOf(lunIndex)) {
            goodDayCls = 'huangdao da';
          }
        } else {
          if (~this.zlunArr.indexOf(lunIndex)) {
            goodDayCls = 'huangdao xiao';
            if (~xiaoArr.indexOf(xiaoIndex)) {
              goodDayCls = 'huangdao da';
            }
          }
        }
      }

      if (lDay == 1 || lDay == 15 || Term) {
        goodDayCls = '';
      }
      if (lMonth == 7 || (lMonth == 12 && lDay >= 24)) {
        goodDayCls = '';
      }

      let _lunarFestival = lunarFestival ? `（${lunarFestival}）` : '';
      _lunarFestival = Term ? `${_lunarFestival}（${Term}）` : _lunarFestival;
      let str = `
        <div class="date">${date.split('-').slice(1).join('-')}</div>
        <div class="date2">${IMonthCn}${IDayCn}<span>${_lunarFestival}</span></div>
        <div class="date3 ${goodDayCls}">${this.zda[daIndex]} - ${xiao[xiaoIndex]} - ${this.zlun[lunIndex]}</div>
      `;
      return str;
    },
    //月下拉选框
    changeMonth() {
      this.value = new Date(this.monthValue);
    },
    //日历样式修改
    removeBtn() {
      this.$el.querySelector('div.el-calendar__title').remove();
    },
  },
}
</script>
<style lang="scss" scoped>
@import "@/util/variable.scss";

/* 日历表格今天样式 */
.el-backtop,
.el-calendar-table td.is-today {
  color: #7000BD;
}

/* 日历表格选择日期样式 */
.el-calendar-table td.is-selected {
  background-color: #7000BD;
  color: white;
}

.zpageWrap {
  position: relative;

  ::v-deep {

    /* 除去日历表格的padding */
    .el-calendar-table .el-calendar-day {
      height: auto;

      &:hover {
        background-color: #F26C08 !important;
        color: white;

        .dateWrap {
          div {
            color: #fff;
          }
        }
      }
    }

    .Calendarselect {
      position: absolute;
      top: 11px;
      right: 16px;
      text-align: right;

      .el-date-editor.el-input {
        width: 120px;
      }
    }

    .dateWrap {
      @include flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;

      div {
        line-height: 30px;
      }

      .date {
        font-weight: bold;
        font-size: 16px;
      }

      .date2 {
        font-size: 14px;
        color: #666;

        span {
          font-size: 12px;
        }
      }

      .date3 {
        font-size: 14px;
        color: #999;

        &.xiao {
          color: #60C80D;
        }

        &.da {
          color: #FF3545;
        }
      }
    }
  }

  .tips {
    @include flexc;
    flex-direction: column;

    p {
      line-height: 30px;
      font-size: 14px;
    }
  }
}
</style>